<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<script charset="utf-8" src="<%=request.getContextPath()%>/resource/plugins/editor/kindeditor.js"></script>
<script charset="utf-8" src="<%=request.getContextPath()%>/resource/plugins/editor/lang/zh_CN.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/resource/plugins/editor/plugins/code/prettify.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/resource/plugins/editor/themes/default/default.css" />
<script charset="utf-8" src="<%=request.getContextPath()%>/resource/plugins/editor/plugins/code/prettify.js"></script>
<script src="<%=request.getContextPath()%>/resource/js/articleEditor.js"></script>

<style type="text/css">
	
</style>

<%-- 发表文章界面 --%>

<%-- 半透明背景DIV --%>
<div id="inputBGDiv" style="display: none;position: absolute;top: 0px;left: 0px;background-color: #FFFFFF;z-index: 800;"></div>
<%-- 悬浮弹出回复DIV --%>
<div id="inputDiv" style="width: 772px;height: auto;border: 1px solid #CCCCCC;display: none;position: absolute; top: 10px; left: 0;background-color: #FFFFFF;z-index: 801;">
	<div style="width: 772px;height: 30px;line-height: 30px;text-align: center;overflow: hidden;background-color: #00BBFF;">
		<div id="leixing" style="float: left;color: white;width: 400px;height: 30px;font-weight: bold;text-align: left;margin-left: 10px;"></div>
		<div style="float: right;color: white;font-weight: bold;width: 30px;height: 30px;cursor: pointer;" onclick="hideInputDiv()">×</div>
	</div>				
	<%--<div id="indexArticleListForMapPointDiv" class="indexArticleListForMapPointDiv">
		
	</div>--%>
	<div style="width: 740px;height: 30px;line-height: 30px;text-align: left;margin-bottom: 10px;margin-top: 35px; margin-left: 30px;">
		<font size="3" color="#b4b4bb"><b>标题&nbsp;</b></font><input id="articleTitle" onkeyup="checkstr(30)" type="text" value="这里输入标题（不超过30个字）" onBlur="if (value ==''){value='这里输入标题（不超过30个字）'}" onFocus="if (value =='这里输入标题（不超过30个字）'){value =''}" style="width: 350px;height:30px;color: #b4b4bb;font-weight: bold;text-align: left;" maxlength="30"/>&nbsp;&nbsp;剩余字数:<span id="num" style="color: red;">30</span>
	</div>
	
	<div style="width:750px;overflow:hidden; float: right; height:14px; line-height:14px; text-align:right; font-size:12px; margin-right: 17px; color: #c0c0c0; margin-top:-8px;"><font color="#aed4f5"><b>我在这里&nbsp;</b></font><span id="position"></span></div>
	
	<div style="width: 735px;height: auto;overflow: hidden; margin-top: 40px; margin-left: 18px;">
		<textarea id="inputTextArea" name="inputTextArea" style="display: bolck;width:730px; height:200px;"></textarea>
	</div>
	
	<div style="width:772px; height: 30px;margin-top: 15px;">
		<input type="button" onclick="submitArticle()" value="发布" style="float: left;height: 30px;width:100px;line-height: 30px;font-weight: bold;background-color: #00AAAA;cursor: pointer;color: white;border: 1px solid #00BBFF; border-radius: 3px; margin-left:50px;">
		<input type="button" onclick="hideInputDiv()" value="取消" style="float: left;height: 30px; width:60px;line-height: 30px;font-weight: bold;background-color: #CCCCCC;cursor: pointer;color: black;border: 1px solid #00BBFF;margin-left: 50px; border-radius: 3px;">
	</div>
	<div class="margin_10"></div>
	<div class="margin_100"></div>
</div>	

<%-- Javascript 区域 --%>
<script type="text/javascript">

//
//---------------------------------------- 全局变量 ------------------------------------------------
//
var partCreateArticleMethod_selectArticleImplementation = function() { alert("partCreateArticleMethod_selectArticleImplementation is not registered"); };
var partCreateArticleMethod_getPositionInfoImplementation = function() { alert("partCreateArticleMethod_getPositionInfoImplementation is not registered"); };

<%
	String methodName_selectArticleImplementation = request.getParameter("methodName_selectArticleImplementation");
	String methodName_getPositionInfoImplementation = request.getParameter("methodName_getPositionInfoImplementation");
	
	if (methodName_selectArticleImplementation != null) {
%>
		partCreateArticleMethod_selectArticleImplementation = <%= methodName_selectArticleImplementation %>;
<%
	}
	
	if (methodName_getPositionInfoImplementation != null) {
%>
		partCreateArticleMethod_getPositionInfoImplementation = <%= methodName_getPositionInfoImplementation %>;
<%		
	}
%>

//
//---------------------------------------- 自动执行代码 ------------------------------------------------
//

//
//---------------------------------------- 对外公开的函数 ------------------------------------------------
//

	//显示弹出编辑器DIV
	function partCreateArticleMethod_showCreationDiv(leixing) {
		$('#inputBGDiv').css({
			'display':'block',
			'width':$(document.body).width(),
			'height':$(document.body).height(),
			'opacity':'0.8'
		});
		$('#addArticle').css("display","none");
		//articleEditor_inputEditor.html("<span style='color:#b4b4bb;'><b>这里输入详细描述，还可以附上图片和视频哦</b></span>");
		$('#leixing').text(leixing);
		var divW = $('#inputDiv').width();
		var divH = $('#inputDiv').height();
		var windowW = $(window).width();
		var windowH = $(window).height();
		var scrollH = $(document).scrollTop();
		$('#inputDiv').css({
			'display':'block',
			//'top':scrollH+((windowH-divH)/2),
			'top':0,
			'left':(windowW-divW)/2
		});
		
		var posiInfoArray = partCreateArticleMethod_getPositionInfoImplementation();
		// This Array must match [mapX, mapY, mapAddr, mapProvider]
		var mapAddr = "无法查询您的位置信息";
		if (posiInfoArray.length == 4)
		{
			mapAddr = posiInfoArray[2];
		}
 		$('#position').text(mapAddr);
	}
	


//
//---------------------------------------- 私有函数 ------------------------------------------------
//
		//检测文本框字数是否超出
	  function checkstr(digit){      //定义checkstr函数实现对用户名长度的限制
		   var n=30;          //定义变量n,初始值为0
		   var str=document.getElementById('articleTitle').value;
			 if(str.length > digit){
				 
			}else {
				document.getElementById('num').innerHTML= n - str.length;
			}
		}


	//提交添加文章（新鲜事）
	function submitArticle() {
		var articleContent = articleEditor_inputEditor.html();
		var articleSummary = articleEditor_inputEditor.text().replace(new RegExp("<\\s*img\\s+([^>]*)>", 'g'), " ");
		articleSummary = articleSummary.replace(new RegExp("<\\s*embed\\s+([^>]*)>", 'g'), " ");
		if (articleSummary.length > 60){
			articleSummary = articleSummary.substr(0, 60) + "...";
		}
		if($('#articleTitle').val() == '这里输入标题（不超过30个字）'|| $('#articleTitle').val() == "" ){
			return alert("请输入标题后再提交您的文章");
		}
		if(articleEditor_inputEditor.text() == ""){
			return alert("对不起，请输入内容后再提交您的文章");
		}
		var articleTitle = $('#articleTitle').val();
		var leixingStr = $('#leixing').text();
		var leixing = "NEWS";
		if(leixingStr == "向附近的人提个问题"){
			leixing = "QUESTION";
		}
		if(leixingStr == "有趣搞笑的东东"){
			leixing = "FUNNY";
		}
		if(leixingStr == "吃喝玩乐的好消息"){
			leixing = "FOOD_SKITTLES";
		}
		if(leixingStr == "这里的新鲜事"){
			leixing = "NEWS";
		}
		if(leixingStr == "发布个专题"){
			leixing = "SUBJECT";
		}
		
		var posiInfoArray = partCreateArticleMethod_getPositionInfoImplementation();
		// This Array must match [mapX, mapY, mapAddr, mapProvider]
		if (posiInfoArray.length != 4)
		{
			alert("无法查询当前位置信息！");
			return;
		}
		else {
			var mapX = posiInfoArray[0];
			var mapY = posiInfoArray[1];
			var mapAddr = posiInfoArray[2];
			var mapProvider = posiInfoArray[3];
			
			// alert("Creation postion: " + mapX+"-"+ mapY+"-"+ mapAddr+"-"+ mapProvider);
		}

		
		
		$.ajax({
			url: '<%=request.getContextPath() %>/article/submitArticle',
			data: {
				articleTitle: articleTitle,
				articleContent: articleContent,
				articleSummary: articleSummary,
				articleCatagory: leixing,
				mapX: mapX,
				mapY: mapY,
				mapAddr: mapAddr,
				mapProvider: mapProvider
			},
			type: 'post',
			async: false,
			dataType: 'json',
			success: function(res) {
				var rs = res.result;
				if(rs == 0) {
					alert("您的消息已经成功发布！");
					hideInputDiv();
					$('#num').text(30);
					//刷新index文章列表
					partCreateArticleMethod_selectArticleImplementation();
					$('#articleTitle').val("这里输入标题（不超过30个字）");
					articleEditor_inputEditor.html("");
					articleEditor_inputEditor.sync();
					
				}else {
					alert("您的消息发表失败，" + res.message);
				}
			}
		});
		
		
	}
	

	// 隐藏弹出编辑器DIV
	function hideInputDiv() {
		$('#inputBGDiv').css({
			'display':'none'
		});
		$('#num').text(30);
		$('#articleTitle').val("这里输入标题（不超过30个字）");
		articleEditor_inputEditor.text("");
		$('#inputDiv').css({
			'display':'none'
		});
	}

</script>